<template>
	<view class="container">
		<view class="tui-top">
			<tui-no-data v-if="nodata" :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>
			<tui-list-cell :radius="true" v-for="(msg ,idx) in msgList" :key="msg.id" >
				<view class="tui-message-item">
					<view class="tui-title-box">
						产品：{{msg.goods_name}}
						<text class="tag-no-read" v-if="msg.read_time <1">未读</text>
					</view>
					<view class="content">
						<view>时间：{{msg.create_time}}</view>
						<view>
							操作类型：{{msg.type == 0?'消费':'增加'}} 
							<view style="float: right;">数量：{{msg.num}}</view>
						</view>
						<view @click="href(msg.order_id)">关联订单：<text style="color: #fe1a4b;">{{msg.osn}}</text></view>
						
					</view>
				</view>
			</tui-list-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				nodata:true,
				msgList:[],
				last_page:2,
				page:1,
				card:0,
				mid:0,
			};
		},
		onLoad(opt) {
			if(opt.id){
				this.card = opt.id
			}else{
				uni.navigateBack();
			}
			let obj = {};
		},
		onShow(){
			this.getlists();
		},
		methods: {
			href(id) {
				uni.navigateTo({
					url: "/pages/myOrder/detail?oid="+id,
				});
			},
			getlists(){
				if(this.last_page < this.page){return;}
				this.tui.get('user/card/his',{card_id:this.card}).then(res=>{
					this.last_page =res.data.last_page;
					this.page++;
					this.msgList=[...this.msgList,...res.data.data];
					if(this.msgList.length <1){
						this.nodata = true
					}else{
						this.nodata = false
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onReachBottom() {
			this.getlists();  
		},  
	};
</script>

<style lang="scss">
	.container {
		padding:20rpx 0 48rpx;
		.tui-top{padding: 20upx 30upx;margin-top: 20rpx;}
		.tui-list-cell{
			margin-bottom: 30upx;
			border-radius: 30upx;
		}

		.tui-message-item {
			width: 100%;
			display: block;
			box-sizing: border-box;
			.tui-title-box {
				font-size: 24upx;
				color: #999999;
				border-bottom: 1px solid #EEEEEE;
				padding: 20upx 0;
				.tag-no-read{
					background-color: #FF2B3F;
					color: #FFFFFF;
					padding: 4upx 8upx;
					margin-left: 20upx;
					border-radius: 10upx;
				}
			}
			
			.content{
				padding: 20upx 0;
				font-size: 24upx;
				font-weight: 400;
				line-height: 1.5;
			}
		}
	}
</style>
